<template>
    <div class="control list_container flex both-100">
        <Breadcrumb :title="pageTitle" />
        <div class="content_container">
            <!-- 搜索 -->
            <el-form ref="searchForm" :inline="true" :model="searchMap" class="search_wrapper flex-space-between">
                    <div class="search ">
                        <el-form-item prop="driverName" size="small">
                            <el-input v-model="searchMap.driverName" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item prop="plateNo" size="small">
                            <el-input v-model="searchMap.plateNo" placeholder="车牌号"></el-input>
                        </el-form-item>
                        <el-form-item class="flex">
                        <el-button @click="handleSearch()" class="btn_primary el-icon-search">查询</el-button>
                        <el-button @click="handleReset()" class="btn_cancel el-icon-refresh-left">重置</el-button>
                    </el-form-item>
                    </div>
                    <div class="edit">
                        <el-form-item class="flex">
                            <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button>
                        </el-form-item>
                    </div>
            </el-form>
            <div class="table_container">
                <!-- 表格 -->
                <el-table :data="dataList" v-loading="loading" stripe class="per_table" style="width: 100%"
                    :height="winTableH">
                    <el-table-column type="index" label="序号" align="center"></el-table-column>
                    <el-table-column prop="driverName" label="司机姓名"></el-table-column>
                    <el-table-column prop="checkTime" label="出车检查时间" align="center"></el-table-column>
                    <el-table-column prop="plateNo" label="车牌号" align="center"></el-table-column>
                    <el-table-column label="操作" width="280">
                        <template slot-scope="scope">
                            <div>
                                <span type="text" class="tag_primary" size="small"
                                    @click="handleSelect(scope.row)">查看</span>
                                <span type="text" class="marginl-10 tag_primary" size="small"
                                    @click="handleEdit(scope.row)">编辑</span>
                                <span type="text" class="marginl-10 tag_warning" size="small"
                                    @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
                @change="getList"></Pagination>
        </div>

        <!-- 弹窗 详情 -->
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
            :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
            <div class="content">
                <el-form ref="form" :model="formModel" size="small" :rules="formRules" label-width="80px"
                    :disabled="title === '安全检查详情'">
                    <el-button class="btn_primary" style="margin-bottom: 20px;">基本 信息</el-button>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="司机姓名" label-width="140px" prop="vehicleLicenseId">
                                <el-select v-model="formModel.vehicleLicenseId" placeholder="请选择" style="width: 100%;">
                                    <el-option v-for="(item, index) in vehicleLicenseListData" :label="item.driverName" :value="item.vehicleLicenseId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车牌号" label-width="140px" prop="plateNo">
                                <el-select v-model="formModel.plateNo" placeholder="请选择" style="width: 100%;">
                                    <el-option v-for="(item, index) in vehicleInfoListData" :label="item.departmentName" :value="item.plateNo"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出车检查时间" label-width="140px" prop="checkTime">
                                <el-date-picker v-model="formModel.checkTime" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-button class="btn_primary" style="margin-bottom: 20px;">检查 项目</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发动机工作正常" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.a" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="散热器水量" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.b" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="刹车油液面" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.c" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="灯光" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.d" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="轮胎压力" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.e" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车辆反光标尔完好" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.f" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="灭火器能有效使用" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.g" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="雨刷器工作正常" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.h" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="助力油液位" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.i" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="尿素液位" label-width="140px" prop="checkItem">
                                <el-select v-model="formModel.checkItem.j" placeholder="请选择" style="width: 100%;">
                                    <el-option label="正常" :value="1"></el-option>
                                    <el-option label="异常" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" v-show="title === '安全检查详情'">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">关 闭</el-button>
            </div>
            <div slot="footer" class="dialog-footer" v-show="title !== '安全检查详情'">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
                <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="title" :visible.sync="dialogVisibleInfo" width="800" append-to-body>
            <custom-title title="详细信息" />
            <BaseDescriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="formModel">
                <template #a>
                    {{ formModel.checkItem.a === 1 ? '正常' : '异常' }}
                </template>
                <template #b>
                    {{ formModel.checkItem.b === 1 ? '正常' : '异常' }}
                </template>
                <template #c>
                    {{ formModel.checkItem.c === 1 ? '正常' : '异常' }}
                </template>
                <template #d>
                    {{ formModel.checkItem.d === 1 ? '正常' : '异常' }}
                </template>
                <template #e>
                    {{ formModel.checkItem.e === 1 ? '正常' : '异常' }}
                </template>
                <template #f>
                    {{ formModel.checkItem.f === 1 ? '正常' : '异常' }}
                </template>
                <template #g>
                    {{ formModel.checkItem.g === 1 ? '正常' : '异常' }}
                </template>
                <template #h>
                    {{ formModel.checkItem.h === 1 ? '正常' : '异常' }}
                </template>
                <template #i>
                    {{ formModel.checkItem.i === 1 ? '正常' : '异常' }}
                </template>
                <template #j>
                    {{ formModel.checkItem.j === 1 ? '正常' : '异常' }}
                </template>
                
            </BaseDescriptions>
        </el-dialog>
    </div>
</template>
<script>
import { vehicleSafetyInspection, vehicleSafetyInspectionList, vehicleLicenseList, vehicleInfoList } from '../api/index'
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';
export default {
    dicts: ['alarm_types'],
    components: {
        BaseDescriptions,
    },
    data() {
        return {
            pageTitle: '安全检查',
            loading: true,
            total: 0,
            title: '安全检查详情',
            dialogVisible: false,
            dialogVisibleInfo: false,
            searchMap: {
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [],
            // 提交表单数据
            formModel: {
                checkItem: {},
            },
            reqType: 'post',
            formRules: {},
            vehicleLicenseListData:[],
            vehicleInfoListData:[],
            descConfig: {
                size: 'medium',
                column: '2',
            },
            descConfigItem: [
                {
                    fieIdName: 'driverName',
                    label: '司机姓名',
                    span: 2,
                },
                {
                    fieIdName: 'plateNo',
                    label: '车牌号',
                    span: 2,
                },
                {
                    fieIdName: 'checkTime',
                    label: '出车检查时间',
                    span: 2,
                },
                {
                    fieIdName: 'a',
                    label: '发动机工作正常',
                    span: 2,
                    slotName: 'a',
                },
                {
                    fieIdName: 'b',
                    label: '散热器水量',
                    span: 2,
                    slotName: 'b',
                },
                {
                    fieIdName: 'c',
                    label: '刹车油液面',
                    span: 2,
                    slotName: 'c',
                },
                {
                    fieIdName: 'd',
                    label: '灯光',
                    span: 2,
                    slotName: 'd',
                },
                {
                    fieIdName: 'e',
                    label: '轮胎压力',
                    span: 2,
                    slotName: 'e',
                },
                {
                    fieIdName: 'f',
                    label: '车辆反光标尔完好',
                    span: 2,
                    slotName: 'f',
                },
                {
                    fieIdName: 'g',
                    label: '灭火器能有效使用',
                    span: 2,
                    slotName: 'g',
                },
                {
                    fieIdName: 'h',
                    label: '雨刷器工作正常',
                    span: 2,
                    slotName: 'h',
                },
                {
                    fieIdName: 'i',
                    label: '助力油液位',
                    span: 2,
                    slotName: 'i',
                },
                {
                    fieIdName: 'j',
                    label: '尿素液位',
                    span: 2,
                    slotName: 'j',
                },
            ],
        }
    },
    methods: {
        submitFrom() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    vehicleSafetyInspection(this.formModel, this.reqType).then(res => {
                        if (200 === res.code) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                            });
                            this.dialogVisible = false
                            this.formModel = {checkItem: {},}
                            this.getList()
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        //删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vehicleSafetyInspection([row.vehicleSafetyInspectionId], 'delete').then(res => {
                    if (200 === res.code) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查询
        handleSearch() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.searchMap = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        //新增打开
        handleAdd() {
            this.title = "新增安全检查"
            this.reqType = 'post'
            this.formModel = {
                checkItem: {},
            }
            this.dialogVisible = true;
        },
        //编辑
        handleEdit(row) {
            this.title = "编辑安全检查"
            this.formModel = row
            console.log(row)
            this.reqType = 'put'
            this.dialogVisible = true;
        },
        //查看
        handleSelect(row) {
            this.title = "安全检查详情"
            this.reqType = 'select'
            this.formModel = row
            this.dialogVisibleInfo = true;
        },
        // 页面数据
        async getList() {
            const { code, rows, total } = await vehicleSafetyInspectionList(this.searchMap)
            if (code === 200) {
                this.loading = false
                this.dataList = rows
                this.total = total
            }
        },
        // 车辆信息列表
        getVehicleInfoList() {
            vehicleInfoList({ pageNum: 1, pageSize: 100 }).then(res => {
                if (200 === res.code) {
                    this.vehicleInfoListData = res.rows
                    console.log(res.rows,'1')
                }
            })
        },
        //驾驶证列表
        getvehicleLicenseList() {
            vehicleLicenseList({ pageNum: 1, pageSize: 100 }).then(res => {
                if (200 === res.code) {
                    this.vehicleLicenseListData = res.rows
                    console.log(res.rows,'2')
                }
            })
        },

    },
    mounted() {
        this.getList()
        this.getVehicleInfoList()
        this.getvehicleLicenseList()
    },
}
</script>
<style lang="less">
.control {
    .el-table__cell {
        .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
<style lang="less" scoped>
.list_container {
    flex-direction: column;
    background: url("@/assets/images/home/content.png") no-repeat;
    background-size: cover;

    .content_container {
        padding: 15px 20px;
        overflow-y: scroll;
    }

    .table_container {
        margin-bottom: 25px;
    }

    .pagination_container {
        display: flex;
        justify-content: space-between;
        height: 32px;
    }
}
</style>